	click =false;
	var offsetX=124;	//addition on margin left +right + padding + border 
	var offsetY=90;
	var Xcoord;
	var Ycoord;
	var color="black"
	var NewXcoord;
	var NewYcoord;
	var eraserUsed=false;
	var Current_color;
	var fill=false; var slope=0;
	var BrushSize=0.5;
	var EraserSize=20;	
	
	window.onload = function() {
	    var canvasObj= document.getElementById("canvas1");
	    canvas=canvasObj.getContext("2d");
	    canvas.font="bold 36px Tahoma ";
	    canvas.fillText("hello ",60,60);
	    canvas.fillRect(0,0,20,20);
	    canvas.lineWidth=BrushSize;
	     var canvasObj2= document.getElementById("canvas2");
	    canvas2=canvasObj2.getContext("2d");
	   
	
	
	};
	
	function eraser(){
			document.getElementById("selectedTool").innerHTML="Eraser";
			var x= document.getElementById("canvas1");
		    var y= document.getElementById("canvas2");
		    Current_color=canvas.strokeStyle;     //stores the current brush color
		    canvas.strokeStyle="white";
		    canvas.fillStyle="white";	    
		    eraserUsed=true;
		    y.onmousemove=function(event){
		    			
				    	if(click==true){
				    				canvas2.beginPath();
					    			canvas2.clearRect(0,0,700,800);
					    			 Xcoord=event.pageX-offsetX;
				      			Ycoord=event.pageY-offsetY;
							    	canvas2.strokeRect(Xcoord-(EraserSize/2),Ycoord-(EraserSize/2),EraserSize,EraserSize);
						    		canvas.fillRect(Xcoord-(EraserSize/2),Ycoord-(EraserSize/2),EraserSize,EraserSize);
				    		}else{
										canvas2.beginPath();
						    			canvas2.clearRect(0,0,700,800);
						    			 Xcoord=event.pageX-offsetX;
					      			Ycoord=event.pageY-offsetY;
								    	canvas2.strokeRect(Xcoord-(EraserSize/2),Ycoord-(EraserSize/2),EraserSize,EraserSize);					    			
				    			}		    	
		    	}
		    	y.onmousedown=function(event){
		    			click=true;
						canvas.fillRect(Xcoord-(EraserSize/2),Ycoord-(EraserSize/2),EraserSize,EraserSize);		    		
		    		}
				y.onmouseup=function(){click=false;}
	}
	
	function setBrushSize(event){
	    canvas.lineWidth=event.target.value;
	}
	
	function SetColor(event){
		var color=document.getElementById("SelectedColor");	
	  canvas.strokeStyle=event.target.id;
	  canvas.fillStyle=event.target.id;
	
	  color.style.backgroundColor=event.target.id;
	}
	
	function RestoreColor(){
	    //this function will be called after eraser is used
	    canvas.strokeStyle=Current_color;   //set the current brush color
	    canvas.fillStyle=Current_color;
	}
	
	function Pencil(){
			document.getElementById("selectedTool").innerHTML="Pencil";
	    var x= document.getElementById("canvas1");
	     var y= document.getElementById("canvas2");
	     x.style.cursor="default";
	    if(eraserUsed==true){
	          RestoreColor();
	          eraserUsed=false;
	    }
	
	    y.onmousedown=function(event){
	      click=true;
	    
	      Xcoord=event.pageX-offsetX;
	      Ycoord=event.pageY-offsetY;
	      document.getElementById("coord").innerHTML=click + "," + Xcoord + " , " + Ycoord;
	      canvas.beginPath();
	      canvas.moveTo(Xcoord,Ycoord);
	
	
	    }
	
	    y.onmouseup=function(event){
	          click=false;
	          NewXcoord=event.pageX-offsetX;
	          NewYcoord=event.pageY-offsetY;
	          document.getElementById("coord").innerHTML=click + "," +NewXcoord +"," + NewYcoord;
	          canvas.lineTo(NewXcoord,NewYcoord);
	          canvas.stroke();
	
	    }
	    y.onmousemove=function(event){
	      if(click==true){
	           NewXcoord=event.pageX-offsetX;
	           NewYcoord=event.pageY-offsetY;
	           canvas.lineTo(NewXcoord,NewYcoord);
	           canvas.stroke();
	      }
	    }
	
	
	}
	
	function DrawRectangle(){
					
			document.getElementById("selectedTool").innerHTML="Rectangle";
	        var x= document.getElementById("canvas1");
	         var y= document.getElementById("canvas2");
	        x.style.cursor="crosshair";
	        if(eraserUsed==true){
	          RestoreColor();
	          eraserUsed=false;
	    }
	     y.onmousedown=function(event){
	      click=true;
	      Xcoord=event.pageX-offsetX;
	      Ycoord=event.pageY-offsetY;
	      document.getElementById("coord").innerHTML=click + "," + Xcoord + " , " + Ycoord;
		
	
	
	    }
	
	    y.onmouseup=function(event){
	          click=false;
	          canvas2.clearRect(0,0,700,800);
	          NewXcoord=event.pageX-offsetX-Xcoord;
	          NewYcoord=event.pageY-offsetY-Ycoord;
	
	          document.getElementById("coord").innerHTML=click + "," +NewXcoord +"," + NewYcoord;        
	          if(fill===true){
	          		  canvas.fillRect(Xcoord,Ycoord,NewXcoord,NewYcoord);
	          			
	          	}else{
						   canvas.strokeRect(Xcoord,Ycoord,NewXcoord,NewYcoord);
						        		
	          		}		
			
	
	    }
	    y.onmousemove=function(event){
	      if(click==true){ 	 
	      	canvas2.clearRect(0,0,700,800);
	      	canvas2.beginPath(); 
	      	NewXcoord=event.pageX-offsetX-Xcoord;
	     	   NewYcoord=event.pageY-offsetY-Ycoord;       	  	
	                 	        
	      	 if(fill===true){
	  	          		  canvas2.rect(Xcoord,Ycoord,NewXcoord,NewYcoord);
	  	          		   canvas2.fill();
	       			
	          	}else{
					         canvas2.rect(Xcoord,Ycoord,NewXcoord,NewYcoord);					        
					         canvas2.stroke();   		
	        		}
	      }
	    } 
	
	
	}
	//---------------------------------------
	function DrawLine(){
			document.getElementById("selectedTool").innerHTML="Line";
	    var x= document.getElementById("canvas1");
	     var y= document.getElementById("canvas2");
	     x.style.cursor="default";
	    if(eraserUsed==true){
	          RestoreColor();
	          eraserUsed=false;
	    }
	
	    y.onmousedown=function(event){
	      click=true;
	    
	      Xcoord=event.pageX-offsetX;
	      Ycoord=event.pageY-offsetY;
	      document.getElementById("coord").innerHTML=click + "," + Xcoord + " , " + Ycoord;
	      canvas.beginPath();
	      canvas.moveTo(Xcoord,Ycoord);
	       canvas2.beginPath();
	      canvas2.moveTo(Xcoord,Ycoord);
	
	
	    }
	
	    y.onmouseup=function(event){
	          click=false;
	           canvas2.clearRect(0,0,700,800);
	          NewXcoord=event.pageX-offsetX;
	          NewYcoord=event.pageY-offsetY;
	          document.getElementById("coord").innerHTML=click + "," +NewXcoord +"," + NewYcoord;
	          canvas.lineTo(NewXcoord,NewYcoord);
	          canvas.stroke();
	         
	        
	
	    }
	    y.onmousemove=function(event){
	      if(click==true){
	      	      
	      	canvas2.clearRect(0,0,700,800);
	      	canvas2.beginPath();
	      	canvas2.moveTo(Xcoord,Ycoord);
	      	//every time draw new line and remove previous line.
	      	 NewXcoord=event.pageX-offsetX;
	      	 NewYcoord=event.pageY-offsetY;     		
	          canvas2.lineTo(NewXcoord,NewYcoord);
	          canvas2.stroke();       
	        			         
	      }
	    }
	
	
	}
	//----------------------------------------
	function DrawCircle(){
				document.getElementById("selectedTool").innerHTML="Circle";
				var x= document.getElementById("canvas1");
				var y= document.getElementById("canvas2");
				var radius;
			if(eraserUsed==true){
	          RestoreColor();
	          eraserUsed=false;
	    }
				y.onmousedown=function(event){
								click=true;
								Xcoord=event.pageX-offsetX;
	      					Ycoord=event.pageY-offsetY;
	      					canvas.beginPath();
								
					}
				y.onmouseup=function(event){
								canvas2.clearRect(0,0,700,800);
								 NewXcoord=event.pageX-offsetX;
	      	 				NewYcoord=event.pageY-offsetY;   
	      	 				radius=Math.sqrt(Math.pow((NewYcoord-Ycoord),2)+Math.pow((NewXcoord-Xcoord),2)) ;
								canvas.arc(Xcoord,Ycoord,radius,0,2*Math.PI);
								if(fill==true){
											canvas.fill();
									}	else{	canvas.stroke();	
										}			
								
								click=false;					
						
					}
					y.onmousemove=function(event){
						if(click==true){
									canvas2.beginPath();
									canvas2.clearRect(0,0,700,800);
									 NewXcoord=event.pageX-offsetX;
	      	 					NewYcoord=event.pageY-offsetY;   
	      	 					radius=Math.sqrt(Math.pow((NewYcoord-Ycoord),2)+Math.pow((NewXcoord-Xcoord),2));					
									canvas2.arc(Xcoord,Ycoord,radius,0,2*Math.PI);
									canvas2.stroke();	
						}
					}
			
		}
	//------ Drawcircle ends
	
	function CreateText(){
				document.getElementById("selectedTool").innerHTML="Text";
				 var x= document.getElementById("canvas1");
				 x.onmousedown=function(event){
				 		NewXcoord=event.pageX-offsetX;
	          		NewYcoord=event.pageY-offsetY;
	          		var text1=prompt("Enter text ");          		
						canvas.fillText(text1,NewXcoord,NewYcoord);
	
				 	}
		}
		function setFill(){	fill=true;		}
		function resetFill(){ fill=false; }
		function IncreaseSize(){
					BrushSize=BrushSize+1;
					
					canvas.lineWidth=BrushSize;					
					EraserSize=EraserSize+2;
					
			}
			function DecreaseSize(){
				if(BrushSize>0.5)
				{	BrushSize=BrushSize-1;
					canvas.lineWidth=BrushSize;					
				}
				if(EraserSize>6){EraserSize=EraserSize-2;}
									
					
					
			}